import Echart from '../report-public/flow-e-chart/index';
import ReportEchartAlert from '../report-public/report-echart-alert/index';
import * as ReportUtil from '../../../util/reportUtil';
import trim from 'lodash/trim';
import {Icon} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component{
	constructor(props){
		super(props);
	}
	
	render(){
		const {datas = [], loading,title = '',module = 1} =  this.props;
		const echartoption = this.initEchartOption();
        const marginClass =  module === 1 ? {'marginRight':'8px'} : {"marginLeft":"8px"};
		return (
			<div className="analyse-e-chart" style={marginClass}>
				{datas.length > 0 ?
					<div>
						<div className="e-chart-head">
							<span className="e-chart-head-name">{`${title}(TOP5)`}</span>
							<span className="e-chart-head-more">
								<span onClick={this.showModal.bind(this)} style={{'marginRight': '10px'}}>{getLabel(17499,'更多')}</span>
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@smt6fx`} type="download" title={getLabel(385746,'另存为图片')} onClick={this.downloadImg.bind(this)}/>
							</span>
						</div>
					
						<div className="e-chart-main">
							<Echart ecId={`${this && this.props && this.props.ecId || ''}_Echart@x5gdpj`} ref="echart" echartoption={echartoption} clickEvent={this.doClickEvent.bind(this)}/>
						</div>
					</div>
					:
					<ReportEchartAlert ecId={`${this && this.props && this.props.ecId || ''}_ReportEchartAlert@q8rp45`} loading={loading} />
				}
			</div>
		)
	}
	
	showModal(){
		const {showModal,module} = this.props;
        showModal && showModal(1,{module});
	}

    doClickEvent(flag,data= {}){
        const {showModal,tabKey,module} = this.props;
        showModal && showModal(2,{'analyseType':tabKey,module:module,...data});
	}

	initEchartOption(){
		const {datas=[],title=''} = this.props;
		const _datas = [];
		const _yAxisData = [];
		datas.map(o=>{
			_datas.push(o);
			_yAxisData.push(o.title);
		});
		const echartoption = {
			tooltip:{
                trigger: 'axis',
                formatter:function(params, ticket, callback){
                    const da = params[0].data;
                    const {tips='',title = ''} = da;
                    return ReportUtil.echartTipNewLine(title, 50) + '<br/>' + tips;
                },
                axisPointer : {
                    type : 'none',
                }
			},
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '10%',
		        containLabel: true
		    },
	        xAxis:  {
		        type: 'value',
        		splitLine:{
		            show:false
		        }
		    },
		    yAxis: {
		        type: 'category',
		        data: _yAxisData,
		        axisLabel:{
		        	formatter:function(value){
		        		let __value = trim(value);
		        		return ReportUtil.InterceptLabel(__value,12);
		        	}
		        }
		    },
		    color:['#F67C4C'],
	        series: [
		        {
		            name: "",
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: false,
		                    position: 'insideRight'
		                }
		            },
		            barWidth : 40,
		            data: _datas
		        },
		    ]
		};
		return echartoption;
	}
	
	downloadImg(){
		const echartid  = this.refs.echart.getEchartId();
		const cvs = jQuery("div[_echarts_instance_='"+echartid+"'] canvas")[0];
		ReportUtil.downloadCvs2Img(cvs);
	}
}
